<template>
  <div class="content">
    <a-page-header
        :title="'ID-' + matchId"
        :subtitle="matchInfo.matchTitle"
        :show-back="false"
    >
      <template #breadcrumb>
        <a-breadcrumb>
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>比赛</a-breadcrumb-item>
          <a-breadcrumb-item>判题</a-breadcrumb-item>
        </a-breadcrumb>
      </template>
      <template #extra>

      </template>
    </a-page-header>
    <div style="margin-top: 20px">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-card style="height: 580px">
            <template #title>
              <a-select placeholder="请选择题目" @change="topicChange">
                <a-option
                    v-for="(item,index) in topicList"
                    :key="index"
                    :value="item.id">
                  {{ item.title }}
                </a-option>
              </a-select>
            </template>
            <a-table
                :pagination="false"
                row-key="id"
                :columns="columns"
                :data="submitList"
                @select="selectSubmitList"
                :row-selection="rowSelection"
                :selected-keys="selectedKeys"
            >
              <template #submitStatus="{ record }">
                <icon-check-circle v-if="record.submitStatus === 2" style="color: green" />
                <icon-check-circle v-else style="color: #ccc" />
              </template>
            </a-table>
          </a-card>
        </a-col>
        <a-col :span="9">
          <a-card >
            <template #title>
              No. {{topicInfo.topicNumber}} : {{ topicInfo.title}}
            </template>
            <template #extra>
              <a-tag v-if="topicInfo.topicLanguage == 0" color="green">Java</a-tag>
              <a-tag v-else color="red">Html/Css/JavaScript</a-tag>
            </template>
            <a-scrollbar style="height: 503px;;overflow: auto;">
              <MdViewer :value="topicInfo.content" style="height: 500px;"/>
            </a-scrollbar>
          </a-card>
        </a-col>
        <a-col :span="9">
          <a-collapse :default-active-key="['1']" accordion>
            <a-collapse-item header="代码详情" key="1">
              <div style="height: 400px;">
                <CodeEditor
                    v-if="topicInfo.topicLanguage == 0"
                    :value="submitList[topicIndex]?.submitCode"
                    language="java"
                    style="height: 400px;"/>
                <CodeEditor
                    v-else
                    :value="submitList[topicIndex]?.submitCode"
                    language="html"
                    style="height: 400px;"/>
              </div>
            </a-collapse-item>
            <a-collapse-item header="页面效果" key="2">
              <div style="max-height: 400px;" v-html="submitList[topicIndex]?.submitCode">

              </div>
            </a-collapse-item>
          </a-collapse>
          <a-card style="margin-top: 20px;min-height: 60px">
            <a-row :gutter="16">
              <a-col :span="18">
                <a-input-number
                    @keyup.enter="submit"
                    ref="inputNum"
                    model-event="input"
                    :max="topicInfo.topicExp"
                    :default-value="submitList[topicIndex]?.submitExp"
                    v-model="exp"
                    :min="0"
                    placeholder="请输入分数"
                    mode="button" />
              </a-col>
              <a-col :span="6">
                <a-button  style="width: 100%;" type="primary" @click="submit">提 交</a-button>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import request from "../../axios/axios.ts";
import MdViewer from "../../components/MdViewer.vue";
import CodeEditor from "../../components/CodeEditor.vue";
import {Message} from "@arco-design/web-vue";
import useUserInfoStore from "../../store/user.ts";

onMounted(() => {
  const user = useUserInfoStore()
  const {id, userRole} = user.userInfo
  if (userRole !== 'admin') {
    Message.error("你无权查看此页面")
    router.back()
  }
  getMatchInfo()
  getMatchTopic()
  inputNum.value.focus()
})


const router = useRouter();
// 获取路由中携带的比赛参数
const matchId = router.currentRoute.value.query.matchId
const matchInfo = ref({})
const inputNum = ref()

const submitList = ref([])
const selectedKeys = ref([])

const topicList = ref([])
const topicInfo = ref({})
const topicId = ref(null)
const topicIndex = ref(0)

const exp = ref(null)

const rowSelection = {
  type: 'radio'
};

const columns = [
  {
    title: '状态',
    slotName: 'submitStatus',
  },
  {
    title: '姓名',
    dataIndex: 'createUsername',
  },
  {
    title: '分数',
    dataIndex: 'submitExp',
  }
]

const getMatchInfo = () => {
  request.get("/api/match/query/" + matchId).then(res => {
    if (res.data.success) {
      matchInfo.value = res.data.data
    }
  })
}

const getMatchTopic = () => {
  request.get("/api/match/topicList",{
    params: {
      matchId: matchId
    }
  }).then(res => {
    if (res.data.success) {
      topicList.value = res.data.data
    }
  })
}

const getSubmitList = () => {
  request.get("/api/submit/submitList",{
    params: {
      matchId: matchId,
      topicId: topicId.value
    }
  }).then(res => {
    if (res.data.success) {
      submitList.value = res.data.data
      selectedKeys.value = [submitList.value[topicIndex.value].id]
    }
  })
}

const topicChange = (id) => {
  topicIndex.value = 0
  topicId.value = id
  getSubmitList()
  request.get("/api/topic/get/" + id).then(res => {
    if (res.data.success){
      topicInfo.value = res.data.data
    }
  })
}

const submit = () => {
  request.put("/api/submit/updateSubmitExp",{
      id: selectedKeys.value[0],
      submitExp: exp.value
  }).then(res => {
    if (res.data.success){
      getSubmitList()
      Message.success("提交成功")
      exp.value = null;
      if (topicIndex.value++ >= submitList.value.length - 1){
        Message.success("阅卷完成！")
        router.back()
        return
      }
      selectedKeys.value = [submitList.value[topicIndex.value].id]
      inputNum.value.focus()
    }
  })
}

const selectSubmitList = (rowKeys,rowKey,record) => {
  selectedKeys.value = [rowKey]
  for (let i = 0; i < submitList.value.length; i++) {
    if (submitList.value[i].id === rowKey){
      topicIndex.value = i
      break
    }
  }
}
</script>

<style scoped>
.content{
  padding: 20px;
  width: 80%;
  margin: 0 auto;
}
</style>
